@extends('front.public_layout.layout')


@section('style')
    <link rel="stylesheet" href="{{asset('/front/css/video_article.css')}}">
    <link rel="stylesheet" href="{{asset('/front/lib/muiplayer/mui-player/dist/mui-player.min.css')}}">

    <style>

    </style>
@endsection

@section('content')
    <div class="middle-content video-article">

        <div class="video-title">{{ $article->region_info ? '【'.$article->region_info->region_name.'】' : '' }}{{ $article->article_title }}</div>

        <div class="video-player">
            <div id="mui-player" class="video-div"></div>
            <div class="video-num-data">
                <div class="zan left">{{ $article->zan_num }}</div>
                <div class="collect left">{{ $article->collect_num }}</div>
            </div>
        </div>

        @if ($recommendArticle)
            <div class="video-push">
                <div class="push-title">相关推荐</div>

                @foreach($recommendArticle as $recommendArticleVal)
                <a class="push-item">
                    <div class="video-img">
                        <img src="{{ $recommendArticleVal->list_img_url }}" alt="">
                    </div>
                    <div class="push-title">{{ $recommendArticleVal->region_info ? '【'.$recommendArticleVal->region_info->region_name.'】' : '' }}{{ $recommendArticleVal->article_title }}</div>
                    <div class="push-author">
                        <div class="author-img">
                            <img src="{{ $recommendArticleVal->articles_author->avatar_url }}" alt="">
                        </div>
                        <div class="author-name">{{ $recommendArticleVal->articles_author->name }}</div>
                    </div>
                    <div class="data-num">{{ $recommendArticleVal->read_num }}播放量·{{ $recommendArticleVal->zan_num }}点赞量</div>
                </a>
                @endforeach


            </div>
        @endif
    </div>

@endsection


@section('js')

    <script src="{{asset('front/lib/muiplayer/static/js/config.js')}}"></script>
    <script src="{{asset('front/lib/muiplayer/mui-player/dist/mui-player.min.js')}}"></script>
    <script src="{{asset('front/lib/muiplayer/mui-player-desktop-plugin/dist/mui-player-desktop-plugin.min.js')}}"></script>
    <script>

        var config = {
            container:'#mui-player',
            title:'{{ $article->article_title }}',
            src:'{{ $article->video_url }}',
            poster:'{{ $article->list_img_url }}',
            videoAttribute:[
                {attrKey:'webkit-playsinline',attrValue:''},
                {attrKey:'playsinline',attrValue:''},
                {attrKey:'x5-playsinline',attrValue:''},
                {attrKey:'t7-video-player-type',attrValue:'inline'},
                {attrKey:'x5-video-player-type',attrValue:'h5-page'},
                {attrKey:'x-webkit-airplay',attrValue:'allow'},
                {attrKey:'controlslist',attrValue:'nodownload'},
            ],
        }

        config.plugins = [
            typeof MuiPlayerDesktopPlugin == 'function' ? new MuiPlayerDesktopPlugin({}) : {},
        ]
        var mp = new MuiPlayer(config);

    </script>
@endsection